import { computed, defineAsyncComponent, readonly, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import { defineStore } from 'pinia'
import { SEARCH_RESULT_TYPE, SEARCH_RESULT_MAP as typeMap } from '@/constant'
import API from '@/http'

const useSearchResultStore = defineStore('search-result', () => {
  const { t: $t } = useI18n()

  const router = useRouter()
  const route = useRoute()

  /** 搜索的文字 */
  const searchText = ref(route.query?.keyword || '')
  const hasSearchText = computed(() => !!searchText.value)

  /** 當按下搜索時 */
  function onSearch(v) {
    if (v) {
      searchText.value = v
      fetchAll()
      return router.replace({ query: { keyword: searchText.value, type: typeMap[currentTab.value] } })
    } else {
      return Promise.resolve()
    }
  }

  function clearSearch() {
    searchText.value = ''
    return router.replace({ query: null })
  }

  const All = defineAsyncComponent({ loader: () => import('@/pages/search/result/All.vue') })
  const Creator = defineAsyncComponent({ loader: () => import('@/pages/search/result/Creator.vue') })
  const Video = defineAsyncComponent({ loader: () => import('@/pages/search/result/Video.vue') })
  const Photo = defineAsyncComponent({ loader: () => import('@/pages/search/result/Photo.vue') })
  const Keyword = defineAsyncComponent({ loader: () => import('@/pages/search/result/Keyword.vue') })
  const Favorite = defineAsyncComponent({ loader: () => import('@/pages/search/result/Favorite.js') })
  const Buy = defineAsyncComponent({ loader: () => import('@/pages/search/result/Buy.js') })

  const searchResultTags = [
    { label: $t('tab.searchResult.all'), value: SEARCH_RESULT_TYPE.ALL, component: All },
    { label: $t('tab.searchResult.creator'), value: SEARCH_RESULT_TYPE.CREATOR, component: Creator },
    { label: $t('tab.searchResult.video'), value: SEARCH_RESULT_TYPE.VIDEO, component: Video },
    { label: $t('tab.searchResult.photo'), value: SEARCH_RESULT_TYPE.PHOTO, component: Photo },
    { label: $t('tab.searchResult.keyword'), value: SEARCH_RESULT_TYPE.KEYWORD, component: Keyword },
    { label: $t('tab.searchResult.favorite'), value: SEARCH_RESULT_TYPE.FAV, component: Favorite },
    { label: $t('tab.searchResult.buy'), value: SEARCH_RESULT_TYPE.BUY, component: Buy },
  ]

  const currentTab = ref(null)
  const currentComponent = computed(() => searchResultTags.find((tag) => tag.value === currentTab.value)?.component)

  function setCurrentTab(tab) {
    currentTab.value = tab
    if (hasSearchText.value && tab) {
      return router.replace({ query: { keyword: searchText.value, type: typeMap[tab] } })
    } else {
      return Promise.resolve()
    }
  }

  const result = ref({
    creator: [],
    video: [],
    image: [],
    creator_total: 0,
    video_total: 0,
    image_total: 0,
  })
  const resultExist = ref(false)

  function __refreshResult() {
    result.value.creator = []
    result.value.video = []
    result.value.image = []
    result.value.creator_total = 0
    result.value.video_total = 0
    result.value.image_total = 0
    resultExist.value = false
  }

  async function fetchAll() {
    __refreshResult()
    const { creator, video, image, creator_total, video_total, image_total } = await API.Search.all({
      data: { keyword: searchText.value },
    })
    result.value.creator = creator
    result.value.video = video
    result.value.image = image
    result.value.creator_total = creator_total
    result.value.video_total = video_total
    result.value.image_total = image_total
    resultExist.value = true
  }

  if (hasSearchText.value) {
    fetchAll()
  }

  return {
    searchText,
    hasSearchText,
    onSearch,
    clearSearch,

    currentTab: readonly(currentTab),
    setCurrentTab,
    searchResultTags,
    currentComponent,
    result,
    resultExist,
  }
})

export default useSearchResultStore
